<template>
  <div class="play-record-content">
      <div class="record-hd fs16 fcCCC">播放列表</div>
      <div class="record-bd pt20">
          <ul>
              <li v-for="item in playRecordList" :key=item.key @click="playSong(item)"
                :class="{'clearfix':true,'record-li':true,'active': item.active}">
                <i class="fcWhite fs12 fl fcCCC song-name">{{ item.name }}</i>
                <div class='fr opt-icons ml30'>
                  <i class="disinblock delete" @click="deleteSong(item.name)"></i>
                </div>
                <i class="fcWhite fs12 fr fcCCC author">{{ item.author }}</i>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  name: "playRecord",
  props: ['playRecordData','listUpdated'],
  data() {
    return {
      playRecordList: [],
      active: false
    }
  },
  mounted() {
    this.getPlayRecord()
    this.$emit('playOrPasMusic', false)
    this.$emit('initAudio', true, this.playRecordList[0])
    this.$emit('setPlayRecord', this.playRecordList)
    this.$emit('getLyric', this.playRecordList[0].id)
  },
  methods: {
    getPlayRecord() {
      const record = JSON.parse(localStorage.getItem("playRecord"))
      this.playRecordList = record
      let songAuthor
      this.playRecordList.forEach((item, i) => {
        songAuthor = []
        item.ar.forEach(item => {
          songAuthor.push(item.name)
        })
        item.index = i
        item.author = songAuthor.join("/")
      })
    },
    deleteSong(name) {
      console.log('delete song')
      let newPlayRecordList = this.playRecordList.filter(item => item.name !== name)
      if (newPlayRecordList.length) {
        this.playRecordList = newPlayRecordList
      } else {
        this.playRecordList = []
      }
      this.$emit('setPlayRecord', this.playRecordList)
      this.$emit('initAudio', false, this.playRecordList[0])
    },
    playSong(row) {
      store.dispatch('song/judgeMusic', row.id)
    },
  },
  watch: {
    listUpdated() {
      this.getPlayRecord()
    }
  }
}
</script>

<style lang="less" scoped>
    .play-record-content {
      padding: 10px 20px;
      .record-hd {
        border-bottom: 1px solid;
        padding-bottom: 5px;
      }
      .record-bd {
        height: 240px;
        overflow-y: scroll;
      }
      .record-li {
        padding: 10px 0px;
        &:hover {
          background: rgba(0, 0, 0, 0.7);
          cursor: pointer;
        }
        &.active {
          background: #000;
        }
        .opt-icons {
          width: 100px;
          height: 16px;
          .delete {
            width: 14px;
            height: 14px;
            background: url("../../assets/playlist.png");
            background-position: -50px 0;
            &:hover {
              background-position: -50px -20px;
            }
          }
        }
        .song-name,.author {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
        .song-name {
          width: 200px;
        }
        .author {
          width: 80px;
        }
      }
    }
  
</style>